<template>
	<view class="">
		<sortable-renderjs domId="horizontal" @changeList="horizontalListChange" :options="options">
			<view class="list horizontal" id="horizontal">
				<view class="list__item" v-for="(item,index) in list" :key="item.Id" :data-id="item.Id" @longtap="longpressModule">
					<view class="list__item--left">
						<image :src="item.img" mode="aspectFill"></image>
					</view>
					<view class="list__item--center">
						<view class="list__item--center-title">{{item.SubjectTitle}}</view>
						<view class="list__item--center-content">{{item.CoverContent}}</view>
					</view>
					<view class="list__item--right">
						<image src="@/static/theme/default/community/del.png" mode="" @click="del(index)"></image>
						<image src="@/static/theme/default/community/list.png" mode=""></image>
					</view>
				</view>
			</view>
		</sortable-renderjs>
		<view class="bottom" @click="goPage">添加作品</view>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import sortableRenderjs from '@/uni_modules/cms-sortable-renderjs/cms-sortable-renderjs';
	import DefaultSeries from '@/static/theme/default/community/tiezi.png';
	import { formatImg } from '@/common/custom_util.js';
	
	export default {
		components: {
			sortableRenderjs
		},
		data() {
			return {
				options: {
					disabled: false,
					delay: 100
				},
				list: [],
				ids: [],
				seriesid: '',
			}
		},
		onLoad(options) {
			this.seriesid = options.id;
			let list = options.data ? JSON.parse(options.data) : this.list;
			list.forEach(item => {
				item.img = item.DefaultImage ? formatImg(item.DefaultImage) : DefaultSeries;
			})
			this.list = list;
		},
		onNavigationBarButtonTap() {
			if(!this.ids.length) {
				let params = [];
				this.list.forEach((item,index) => {
					params.push({
						subjectid: item.Id,
						seriesid: this.seriesid,
						seriessorting: index+1
					})
				})
				this.clearSeriesIdInSubject().then(() => {
					this.updateSeriesIdInSubject(params)
					setTimeout(() => {
						uni.navigateBack()
					},300)
				})
				return
			}
			if(!this.list.length) {
				this.clearSeriesIdInSubject()
				setTimeout(() => {
					uni.navigateBack()
				},300)
				return
			}
			let apiparams = [];
			this.ids.forEach((item,index) => {
				apiparams.push({
					subjectid: item,
					seriesid: this.seriesid,
					seriessorting: index+1
				})
			})
			this.clearSeriesIdInSubject().then(() => {
				this.updateSeriesIdInSubject(apiparams)
				setTimeout(() => {
					uni.navigateBack()
				},300)
			})
		},
		methods: {
			/**
			 * 合集内帖子管理保存第一步，清空当前合集内帖子的合集id和排序
			 */
			clearSeriesIdInSubject() {
				let that = this;
				return new Promise((resolve, reject) => {
					_custom.getDataJava({
						apiname: 'clearSeriesIdInSubject',
						code: 2,
						apiparam: {
							seriesid: this.seriesid,
						},
						success(res) {
							resolve();
						}
					})
				})
			},
			/**
			 * 合集内帖子管理保存第二步，批量设置需要保存在合集内的帖子的合集id和排序
			 */
			updateSeriesIdInSubject(apiparam) {
				let that = this;
				return new Promise((resolve, reject) => {
					_custom.getDataJava({
						apiname: 'updateSeriesIdInSubject',
						code: 13,
						apiparam,
						success(res) {
							resolve();
						}
					})
				})
			},
			/**
			 * 拖动事件
			 * @param {Object} v 回调参数
			 */
			horizontalListChange(v) {
				console.log(v)
				this.ids = v;
			},
			/**
			 * 长按事件
			 */
			longpressModule() {
				uni.vibrateShort({
					success: function() {
						console.log('success');
					}
				});
			},
			goPage() {
				uni.navigateTo({
					url: './series-add-subject?data=' + JSON.stringify(this.list),
				})
			},
			getSelectList(v) {
				this.list.push(...v);
			},
			del(i) {
				this.list.splice(i,1)
			}
		}
	}
</script>

<style scoped lang="scss">
	.list {
		padding-bottom: 100rpx;
		
		&__item {
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			
			
			&--left {
				background-color: #65B0FF;
				border-radius: 20rpx;
				height: 140rpx;
				
				image {
					width: 200rpx;
					height: 100%;
					border-radius: 10rpx;
				}
			}
			
			&--center {
				flex: 1;
				width: calc(100% - 340rpx);
				padding: 0 20rpx;
				box-sizing: border-box;
				
				&-title {
					font-size: 33rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				
				&-content {
					font-size: 28rpx;
					color: #aaa;
					overflow: hidden;
					text-overflow: ellipsis;
					display:-webkit-box;
					-webkit-box-orient:vertical;
					-webkit-line-clamp:2;
				}
			}
			
			&--right {
				width: 140rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
	
	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 3;
		height: 100rpx;
		background-color: #fff;
		text-align: center;
		line-height: 100rpx;
	}
</style>
